/* eslint-disable react/no-array-index-key */
/* eslint-disable react/jsx-no-useless-fragment */
/* eslint-disable no-debugger */
/* eslint-disable react/void-dom-elements-no-children */
/**
 * 明细页面组件，生成明细页面的外层容器
 * @author LiAnqi
 * @date 2022-03-17
 * @description
 * [Props]
 * title 页面标题
 * mode 模式，edit 编辑模式 / browse 浏览模式
 * pageLayoutProps 页面排版配置
 *  {
 *    span: '...',
 *    offset: '...',
 *    align: '...',
 *    justify:'...'
 *  }
 * pageToolbar 页面工具栏内容，渲染在页面右上角
 * pageFootbar 页脚栏内容，渲染在页面底部
 * children 页面内容
 * onSubmitPage 对外提供的回调
 */
import { Row, Col, PageHeader } from 'antd'
import { defaultPageLayoutProps } from './DefaultProps'

function FCDetailPage(props) {
  const {
    title,
    mode,
    layoutProps = { ...defaultPageLayoutProps },
    children,
    pageToolbar,
    pageFootbar,
    onSubmitPage,
  } = props
  const { justify, align, span, offset } = layoutProps
  const rowProps = { justify, align }
  const colProps = { span, offset }
  const itemList = Array.isArray(children) ? children : [children]

  const handleSubmitPage = (datas) => {
    // console.log(datas)
    onSubmitPage(datas)
  }

  return (
    <PageHeader title={title} extra={pageToolbar}>
      <Row {...rowProps}>
        {itemList?.map((item, index) => (
          <Col key={index} {...colProps}>
            {item}
          </Col>
        ))}
      </Row>
      <Row>
        <Col>{pageFootbar}</Col>
      </Row>
    </PageHeader>
  )
}

export default FCDetailPage
